<template>
    <div class="">
        <mt-navbar v-model="selected" style="padding-bottom:0.1rem;">
            <mt-tab-item style="z-index:1" id="1">午托</mt-tab-item>
            <mt-tab-item style="z-index:1" id="2">晚托</mt-tab-item>
            <mt-tab-item style="z-index:1" v-if="useInfo.userTypeId==4" id="3">课程</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container class="absolute_wrap" style="top:2.4rem;" v-model="selected" >
            <mt-tab-container-item id="1" style="overflow-x:hidden;">
                <control v-if="useInfo.userTypeId==4" markSort=1 :show="this.selected=='1'"></control>
            </mt-tab-container-item>
            <mt-tab-container-item id="2" style="overflow-x:hidden;">
                <control v-if="useInfo.userTypeId==4" markSort=2  :show="this.selected=='2'"></control>
            </mt-tab-container-item>
            <mt-tab-container-item v-if="useInfo.userTypeId==4" id="3" style="overflow-x:hidden;">
                <control markSort=3 :show="this.selected=='3'" ></control>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>   
</template>

<script>
    import control from '../components/control.vue'
    import qiandaoChart from '../components/qiandaoChart.vue'
    export default {
        created() {
            this.getUseInfo();
        },
        components: {
            control,
            qiandaoChart,
        },
        data() {
            return {
                selected: '1',
                useInfo: '',
                list: [],
            }
        },
        methods: {
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>